<template>
  <view class="class-container">
    <up-navbar title="班级管理" @rightClick="C.handleAdd()" :autoBack="true">
      <template #right>
        <up-icon name="plus" size="20" color="#333"></up-icon>
      </template>
    </up-navbar>
    <up-gap height="10" bgColor="#fff"></up-gap>

    <view class="content">
      <view class="search-container">
        <up-search v-model="C.searchKeyword.value" @custom="C.handleSearch()" placeholder="搜索班级..."></up-search>
      </view>

      <u-list class="class-list">
        <u-list-item v-for="(cls, index) in C.filteredModels.value" :key="cls.classId">
          <view class="class-item">
            <view class="class-info">
              <text class="class-name">{{ cls.name }}</text>
              <text class="class-desc" v-if="cls.desc">{{ cls.desc }}</text>
            </view>
            
            <view class="actions">
              <u-button 
                size="mini" 
                type="info" 
                plain
                @click="showActionMenu(cls)"
                class="more-button"
              >
                <u-icon name="more-dot-fill" size="18" color="#666"></u-icon>
              </u-button>
            </view>
          </view>
        </u-list-item>
      </u-list>
    </view>

    <!-- 操作菜单 -->
    <u-action-sheet 
      :show="actionMenuVisible" 
      :actions="actionMenuOptions" 
      @close="actionMenuVisible = false"
      @select="handleActionSelect"
    ></u-action-sheet>

    <!-- 班级编辑弹窗 -->
    <admin-class-modal />
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import "jbecool/jbecool.uniapp.min.js";
import "@/js/common.js";
import C from "@/js/admin/class.js";

// 操作菜单相关
const actionMenuVisible = ref(false);
const actionMenuOptions = ref([
  { name: '编辑', value: 'edit' },
  { name: '删除', value: 'delete' }
]);
const selectedClass = ref(null);

// 存储从URL参数中获取的scheduleId
let scheduleId = -1;

onLoad((option) => {
  // 获取从课堂页面传递过来的scheduleId参数
  if (option.scheduleId) {
    scheduleId = parseInt(option.scheduleId);
  }
});

onMounted(async () => {
  C.modelList.value = [];
  C.filteredModels.value = [];
  const im = await C.loadMeta();
  if (im.success) {
    // 设置当前模型的scheduleId，确保添加新班级时能正确关联到课堂
    if (scheduleId !== -1) {
      C.rawModel.scheduleId = scheduleId;
    }

    // 加载当前课堂下的所有班级
    if (scheduleId !== -1) {
      await C.loadModels({ where: [{ scheduleId: scheduleId }] });
    } else {
      await C.loadModels();
    }
  } else {
    uni.showToast({
      title: "获取班级元数据失败",
      icon: "error",
    });
  }
});

// 显示操作菜单
const showActionMenu = (cls) => {
  selectedClass.value = cls;
  actionMenuVisible.value = true;
};

// 处理操作选择
const handleActionSelect = (e) => {
  const action = e.value;
  if (action === 'edit') {
    C.handleEdit(selectedClass.value);
  } else if (action === 'delete') {
    C.handleDelete(selectedClass.value);
  }
  actionMenuVisible.value = false;
};
</script>

<style scoped>
.class-container {
  padding: 20px;
}

.content {
  background-color: #fff;
  border-radius: 8px;
  padding: 15px;
}

.class-list {
  margin-top: 15px;
}

.class-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #f0f0f0;
}

.class-item:last-child {
  border-bottom: none;
}

.class-name {
  font-size: 16px;
  font-weight: 500;
}

.class-desc {
  display: block;
  font-size: 14px;
  color: #666;
  margin-top: 4px;
}

.actions {
  display: flex;
  gap: 5px;
}

.more-button {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
</style>